<template>
  <view class="pay u-p-b-83">
    <view class="address">
      <view class="addressCheck" v-if="!addressDetail">
        <u-button
          type="error"
          shape="circle"
          plain
          size="medium"
          @click="handleAddress"
          >选择地址</u-button
        ></view
      >
      <view v-else class="addressDetail">
        <view class="addressText">{{ totalAddress }}</view>
        <view class="nameAndTel u-flex u-m-t-10">
          <view class="username u-m-r-20">{{ addressDetail.userName }}</view>
          <view class="tel">{{ addressDetail.telNumber }}</view>
        </view>
      </view>
    </view>
    <view class="line"></view>
    <!-- 已选商品 -->
    <view class="checkedGoods">
      <view class="title">已选商品</view>
      <view
        class="goods u-flex"
        v-for="(item, index) in shopCartList"
        :key="index"
      >
        <view class="goodsImg u-m-r-30">
          <u-image
            :src="item.goods_big_logo"
            width="191rpx"
            height="191rpx"
          ></u-image>
        </view>
        <view class="goods-info">
          <view class="good-name u-line-2">{{ item.goods_name }}</view>
          <view class="goods-tools u-flex u-row-between u-m-t-20 u-p-r-50">
            <view class="goods-price">￥{{ item.goods_price }}</view>
            <view class="goods-num">×{{ item.num }}</view>
          </view>
        </view>
      </view>
    </view>
    <!-- 底部支付条 -->
    <view class="countPrice u-flex u-row-between">
      <view class="totalPrice u-flex">
        <view>合计：</view>
        <view class="price">￥{{ totalPrice }}</view>
      </view>
      <u-button
        type="error"
        shape="circle"
        :custom-style="{
          width: '150rpx',
          height: '52rpx',
          fontSize: '20rpx',
          lineHeight: '52rpx',
          textAlign: 'center',
        }"
        @click="hangdlePay"
      >
        去支付（{{ totalCounts }}）</u-button
      >
    </view>
  </view>
</template>

<script>
import { mapActions, mapState } from "vuex";
export default {
  data() {
    return {
      addressDetail: null,
    };
  },
  computed: {
    ...mapState(["shopCartList"]),
    totalAddress() {
      const { provinceName, cityName, countyName, detailInfo } = {
        ...this.addressDetail,
      };
      return provinceName + cityName + countyName + detailInfo;
    },
    //总价
    totalPrice() {
      return this.shopCartList.reduce((sum, item) => {
        if (item.checked) {
          return (sum += item.goods_price * item.num);
        } else {
          return sum;
        }
      }, 0);
    },
    //总数
    totalCounts() {
      return this.shopCartList.reduce((sum, item) => {
        if (item.checked) {
          return (sum += item.num);
        } else {
          return sum;
        }
      }, 0);
    },
  },
  methods: {
      ...mapActions(['getToken']),
    //支付
    async hangdlePay() {
        //判断地址
      if (!this.totalAddress) {
        uni.showToast({
          title: "请选择收货地址",
          icon: "none",
        });
        return;
      }
    //   //获取用户信息
    //   const { encryptedData, rawData, iv, signature } = await wx.getUserProfile(
    //     {
    //       desc: "为用户提供更好的体验",
    //     }
    //   );
    //   //登录
    //   const { code } = await wx.login();
    //   console.log(code);
    //   //请求后台返回token
    //   const tokenParams = {
    //     encryptedData,
    //     rawData,
    //     iv,
    //     signature,
    //     code,
    //   };
    //   const res3 = await this.$u.post("/users/wxlogin", tokenParams);
    //   const token = res3.message.token;
    //   console.log(token);

    await this.getToken()
    // const token = this.$store.state.token
    console.log(this.$store.state.token);

      //获取订单编号
      //请求参数
      const goodsParams = {
        order_price: this.totalPrice,
        consignee_addr:
          this.totalAddress +
          "-" +
          this.addressDetail.userName +
          "-" +
          this.addressDetail.telNumber,
        goods: this.shopCartList.map((item) => {
          return {
            goods_id: item.goods_id,
            goods_number: item.num,
            goods_price: item.goods_price,
          };
        }),
      };
      const res4 = await this.$u.post("/my/orders/create", goodsParams);
      console.log(res4);
      const order_number = res4.message.order_number;
      console.log(order_number);

      //获取支付参数
      const res5 = await this.$u.post(
        "/my/orders/req_unifiedorder",
        { order_number }
      );
      console.log(res5);
    //支付
      const res6 = await wx.requestPayment(res5.message.pay);
      console.log(res6);

      //查看订单状态
      const res7 = await this.$u.post('/my/orders/chkOrder',{order_number})
      console.log(res7);
    },

    //获取地址
    async handleAddress() {
      const [err, res] = await uni.chooseAddress();
      this.addressDetail = res;
      console.log(res);
    },
  },
};
</script>

<style lang="scss" scoped>
.address {
  padding: 50rpx 0;
  .addressCheck {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .addressDetail {
    padding: 30rpx;
  }
}
.line {
  height: 20rpx;
  background-color: #eee;
}
.checkedGoods {
  padding: 0 30rpx;
}
.title {
  height: 71rpx;
  line-height: 71rpx;
  font-weight: 700;
}
.goods {
  padding: 10rpx 0;
  border-bottom: 5rpx solid #eee;
}
.goods-price {
  color: $themeColor;
}
.countPrice {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 83rpx;
  line-height: 83rpx;
  padding: 0 30rpx;
  border-top: 2rpx solid #eee;
}
.price {
  color: $themeColor;
}
</style>